<template>
    <div class="login-container">
      <div class="title-box">
        <h2 class="title">{{ configData.title }}</h2>
      </div>
      <a-card class="login-card" :bordered="false" :body-style="{ width: '480px', padding: '30px 0' }">
        <div class="login-right-container">
          <form @submit.prevent="handleLogin">
            <input v-model="username" type="text" placeholder="Username" required />
            <input v-model="password" type="password" placeholder="Password" required />
            <button type="submit">Login</button>
          </form>
        </div>
      </a-card>
    </div>
  </template>
  
  
  <script setup lang="ts">
  import { ref, onMounted, computed, watch } from 'vue';
  import { useGlobalStore } from '@/pinia/modules/global';
  import { useRouter } from 'vue-router';
  import { loginConfig, configInfo } from '@/api/api.ts';
  
  const username = ref('');
  const password = ref('');
  const globalStore = useGlobalStore();
  const router = useRouter();
  const configData = ref({
    title: '',
    logo: '',
    home_bg: '',
    kf_url: '',
    vip_url: '',
    register_title: '',
    register_agree: ''
  });
  
  // 获取配置数据
  const getConfigData = async () => {
    try {
      const response = await configInfo();
      if (response.code === 1) {
        configData.value = response.data;
        setBodyBackground(configData.value.home_bg);
      } else {
        console.error('获取配置数据失败:', response.msg);
      }
    } catch (error) {
      console.error('获取配置数据出错:', error);
    }
  };
  
  // 检查 token，如果存在则跳转到主页
  onMounted(() => {
    getConfigData();
    const token = globalStore.token || localStorage.getItem('token');
    if (token) {
      router.push({ name: 'Home' });
    }
  });
  
  const handleLogin = async () => {
    try {
      const response = await loginConfig({
        mobile: username.value,
        password: password.value,
      });
  
      if (response.code === 1) {
        globalStore.setToken(response.data.token);
        router.push({ name: 'Home' }); // 登录成功后跳转到主页
      } else {
        alert(response.msg); // 处理登录失败的情况
      }
    } catch (error) {
      alert('登录请求出错'); // 处理网络错误
    }
  };
  
  // 设置 body 的背景图
  const setBodyBackground = (imageUrl: string) => {
    document.body.style.backgroundImage = `url(${imageUrl})`;
    document.body.style.backgroundSize = 'cover';
    document.body.style.backgroundPosition = 'center';
    document.body.style.backgroundRepeat = 'no-repeat';
  };
  
  // 监听 configData 变化，更新背景图
  watch(configData, (newData) => {
    if (newData.home_bg) {
      setBodyBackground(newData.home_bg);
    }
  });
  </script>
  
  <style lang="less" scoped>
  .login-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: flex-end; // 偏右侧布局
    align-items: center;
    position: relative; // 使 title 绝对定位生效
  }
  
  .title-box {
    position: absolute; // 绝对定位
    top: 20px; // 距离顶部 20px
    left: 20px; // 距离左侧 20px
    z-index: 10; // 确保标题在最上层
  }
  
  .title {
    font-size: 22px;
    color: #000000;
    background: rgba(255, 255, 255, 0.8); /* 半透明背景 */
    padding: 10px;
    border-radius: 5px;
  }
  
  .login-card {
    width: 480px;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); // 添加阴影效果
    padding: 30px 0;
    margin-right: 150px;
    background: rgba(255, 255, 255, 0.8); /* 半透明背景 */
  }
  
  .login-right-container {
    width: 360px;
    margin: 0 auto;
    text-align: center;
  }
  
  form {
    text-align: center;
  }
  
  input {
    display: block;
    margin: 10px auto;
    padding: 10px;
    width: 80%;
    max-width: 300px;
  }
  
  button {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #0056b3;
  }
  </style>